<template>
	<view>
		<view v-if="address.length > 0">
		
		<uni-swipe-action>
		<view v-for="item in address" :key="item._id">
			<!-- 从我的收货地址进入 点击修改收货地址 从购物车页面进入 点击选择收货地址 -->
			 <uni-swipe-action-item :right-options="options" @click="swipeActionClickHandler(item)">
		<view class="address-info-box" @click="!flag && chooseAddress(item)">
		  <view class="row1" @click="flag && changeAddress(item)">
		    <view class="row1-left">
		      <view class="username">收货人：<text>{{item.name}}</text></view>
		    </view>
		    <view class="row1-right">
		      <view class="phone">电话：<text>{{item.phone}}</text></view>
		      <uni-icons type="arrowright" size="16"></uni-icons>
		    </view>
		  </view>
		  <view class="row2" @click="flag && changeAddress(item)">
		    <view class="row2-left">收货地址：</view>
		    <view class="row2-right">{{item.address}}</view>
		  </view>
		</view>
		<!-- 底部的边框线 -->
		<image src="/static/cart_border@2x.png" class="address-border"></image>
		</uni-swipe-action-item>
		</view>
		 </uni-swipe-action>
		</view>
		<view v-if="flag || address==''" @click="btnCreateAddress" class="createbtn">添加收货地址</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import cloudApi from "@/common/cloundApi.js"
	export default {
		data() {
			return {
				address:[],
				storageAddress:{},
				flag:0, //判断入口
				options: [{
					  text: '删除', // 显示的文本内容
					  style: {
						backgroundColor: '#C00000' // 按钮的背景颜色
					  }
					}],
			}
		},
		onLoad: function (option) {
			this.flag = option.flag
		},
		onShow() {
			this.getAddress();
		},
		methods: {
		...mapMutations('m_user', ['updateAddress','deleteAddress']),
		btnCreateAddress(){
			uni.navigateTo({
				url:"../addAddress/addAddress"
			})
		},
		// 修改地址详情
		changeAddress(item){
			uni.navigateTo({
				url:"../addAddress/addAddress?item="+item._id
			})
		},
		// 获取所有收货地址
		getAddress(){
			cloudApi.call({
				name:"address",
				data:{
					action:"listmy"  //列出我所有的收货地址
				},
				success:(res)=>{
					this.address = res.result;
				}
			})
		},
		// 选择一个收货地址
		chooseAddress(item){
		   this.updateAddress(item)
		   uni.navigateBack()
		},
		// 删除选择收货地址
		swipeActionClickHandler(item){
			this.storageAddress = JSON.parse(uni.getStorageSync('address'))
			cloudApi.call({
				name:"address",
				data:{
					action:"delete",
					_id:item._id
				},
				success:()=>{
					// 若删除的收货地址是已经选好存入缓存的地址则清除缓存
					console.log(this.storageAddress._id)
					if(this.storageAddress._id===item._id){
						this.deleteAddress()
					}
						this.getAddress();
				}
			})
		}
	}
	}
</script>

<style scoped lang="scss">
.createbtn{
	width: 90%;
	height: 24px;
	padding: 5px;
	position: fixed;
	bottom: 10px;
	border-radius: 4px;
	color: #fff;
	background: #c00000;
	text-align: center;
	left: 50%;
	transform: translate(-50%,0);

}
.address-info-box {
  font-size: 12px;
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 5px;
  border-bottom: 1px solid #ededed;

  .row1 {
    display: flex;
    justify-content: space-between;

    .row1-right {
      display: flex;
      align-items: center;

      .phone {
        margin-right: 5px;
      }
    }
  }

  .row2 {
    display: flex;
    align-items: center;
    margin-top: 10px;

    .row2-left {
      white-space: nowrap;
    }
  }
}
// 底部边框线的样式
.address-border {
  display: block;
  width: 100%;
  height: 5px;
}
</style>
